@use "../mixins/function.scss" as *;

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "white": #ffffff,
    "black": #4a4a4a,
    "primary": (
      "base": #4374ce,
    ),
    "success": (
      "base": #67c23a,
    ),
    "warning": (
      "base": #e6a23c,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #f56c6c,
    ),
    "info": (
      "base": #909399,
    ),
  ),
  $text-color: (
    "primary": #4374ce,
    "regular": #606266,
    "secondary": #909399,
    "placeholder": #a8abb2,
    "disabled": #c0c4cc,
  ),
  $border-color: (
    "": #f0f2f5,
    "light": #f5f7fa,
    "lighter": #fafafa,
    "extra-light": #fafcff,
    "dark": #ebedf0,
    "darker": #e6e8eb,
    "blank": #ffffff,
  ),
  $bg-color: (
    "": #ffffff,
    "page": #f2f3f5,
    "overlay": #ffffff,
  ),
  $border-radius: (
    "base": 4px,
    "small": 2px,
    "round": 20px,
    "circle": 100%,
  ),
  $box-shadow: (
    "": (
      0 12px 32px 4px rgba(0, 0, 0, 0.04),
      0 8px 20px rgba(0, 0, 0, 0.08),
    ),
    "light": (
      0 0 12px rgba(0, 0, 0, 0.12),
    ),
    "lighter": (
      0 0 6px rgba(0, 0, 0, 0.12),
    ),
    "dark": (
      0 16px 48px 16px rgba(0, 0, 0, 0.08),
      0 12px 32px rgba(0, 0, 0, 0.12),
      0 8px 16px -8px rgba(0, 0, 0, 0.16),
    ),
  ),
  $font-size: (
    // 20px
    "extra-large": getCssVarCalc(6px, "font-size-base"),
    // 18px
    "large": getCssVarCalc(4px, "font-size-base"),
    // 16px
    "medium": getCssVarCalc(2px, "font-size-base"),
    // 15px
    "base-plus": getCssVarCalc(1px, "font-size-base"),
    // 14px
    "base": 14px,
    // 12px
    "small": getCssVarCalc(-1px, "font-size-base"),
    // 10px
    "extra-small": getCssVarCalc(-2px, "font-size-base"),
  )
);
